<script setup>
import {useRoute,useRouter} from 'vue-router'
import {onMounted,ref,reactive ,computed } from 'vue'
import {findById} from '@/api/outEnter'
import {findById as findByelderId} from '@/api/elderInfo'
import {findById as findByemployeeId} from '@/api/employer'
import dayjs from 'dayjs'

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}


const route =useRoute()
const router =useRouter()

onMounted(async () => {
    const id = route.query.id;
    try {
        // 等待第一个请求完成
        const adminRes = await findById(id);
        adminView.value = adminRes.data;
        console.log("----->", adminView.value.elderlyId);
        
        // 使用获取到的elderlyId发起第二个请求
        const elderRes = await findByelderId(adminView.value.elderlyId);

        elderInfoView.value = elderRes.data;
         // 使用获取到的elderlyId发起第二个请求
         const employeeRes = await findByemployeeId(adminView.value.approverId);
        employeeView.value = employeeRes.data;
        
    } catch (error) {
        console.error("请求出错:", error);
    }
});
const adminView =ref({})
const elderInfoView =ref({})
const employeeView =ref({})


const handleBack=()=>{
    router.back()
}

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString()
}
const statusInfo = computed(() => {
  const map = {
    0: { text: '申请中', type: 'info' },
    1: { text: '已批准', type: 'success' },
    2: { text: '已拒绝', type: 'danger' },
    3: { text: '外出中', type: 'warning' },
    4: { text: '已返回', type: '' }
  };
  return map[adminView.value.status] || { text: '未知状态', type: '' };
});

</script>

<template>
  <div id="app">
    <div class="app-container">
      <!-- 头部信息 -->
      <div class="detail-header">
        <div class="title-container">
          <div class="title-icon">
            <i class="fas fa-file-contract"></i>
          </div>
          <div class="title-content">
            <h1>外出登记详细信息</h1>
            <p>老人外出申请的详细记录与状态跟踪</p>
          </div>
        </div>
        <div class="record-id">
          <span class="id-label">登记编号：</span>
          <span class="detail-value">
          {{ adminView.recordId }}
          </span>
        </div>
      </div>
      
      <!-- 主要内容 -->
      <div class="detail-content">
        <div class="info-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-user-circle"></i>
            </div>
            <h2 class="card-title">老人基本信息</h2>
          </div>
          
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-id-card"></i>
                <span>外出登记编号：</span>
              </div>
              <span class="detail-value">
          {{ adminView.recordId }}
          </span>
            </div>
            
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-user"></i>
                <span>老人姓名：</span>
              </div>
              <span class="detail-value">
                 {{ elderInfoView.name }}
               </span>
            </div>
            
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-clock"></i>
                <span>申请时间：</span>
              </div>
              <span class="detail-value">
                 
                 {{ formatTime(adminView.applyTime) }}
               </span>

            </div>
            
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-sticky-note"></i>
                <span>外出原因：</span>
              </div>
              <span class="detail-value">
                 
                 {{ adminView.reason }}
               </span>

            </div>
            
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-tasks"></i>
                <span>当前状态：</span>
              </div>
              <div class="info-value">
                <el-tag :type="statusInfo.type">
                    {{ statusInfo.text }}
                    </el-tag>
              </div>
            </div>
          </div>
        </div>
        
        <div class="info-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-user-tie"></i>
            </div>
            <h2 class="card-title">审批信息</h2>
          </div>
          
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-user-check"></i>
                <span>审批人：</span>
              </div>
              <span class="detail-value">
                 
                 {{ employeeView.name }}
               </span>

            </div>
            
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-calendar-check"></i>
                <span>审批时间：</span>
              </div>
              <span class="detail-value">
                 
                 {{  formatTime(adminView.approveTime)}}
               </span>

            </div>
            
            <div class="info-item">
              <div class="info-label">
                <i class="fas fa-comment-alt"></i>
                <span>审批备注：</span>
              </div>
              <span class="detail-value">
                 
                 {{  adminView.approveRemark}}
               </span>

            </div>
          </div>
        </div>
        
        <div class="info-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-clock"></i>
            </div>
            <h2 class="card-title">外出时间信息</h2>
          </div>
          
          <div class="time-section">
            <div class="time-card">
              <div class="time-header">
                <div class="time-icon">
                  <i class="fas fa-door-open"></i>
                </div>
                <div class="time-title">外出时间</div>
              </div>
              <div class="time-value">  <span class="detail-value">
                 
                 {{ formatTime(adminView.outTime) }}
               </span>
</div>
            </div>
            
            <div class="time-card">
              <div class="time-header">
                <div class="time-icon">
                  <i class="fas fa-door-closed"></i>
                </div>
                <div class="time-title">预计返回时间</div>
              </div>
              <div class="time-value"> <span class="detail-value">
                 
                 {{ formatTime(adminView.inTime) }}
               </span>
</div>
            </div>
          </div>
        </div>
        
        <div class="action-buttons">
          <button class="back-button" @click="handleBack">
            <i class="fas fa-arrow-left"></i>
            返回上一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
  background: linear-gradient(135deg, #f8f9fc 0%, #eef2f7 100%);
  min-height: 100vh;
  padding: 20px;
  color: #2c3e50;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding: 20px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.title-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.title-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
}

.title-icon i {
  font-size: 24px;
  color: white;
}

.title-content h1 {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: 0.5px;
}

.title-content p {
  font-size: 14px;
  color: #7f8c8d;
  margin-top: 5px;
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.info-card {
  background: white;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 15px;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  color: #0984e3;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #1c2e45;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed #f1f5f9;
}

.info-label {
  min-width: 120px;
  font-weight: 500;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-label i {
  color: #4a90e2;
  font-size: 16px;
}

.info-value {
  flex: 1;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.status-tag {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-pending { background: #fff0f0; color: #ff6b6b; }
.status-approved { background: #e8f4ff; color: #3498db; }
.status-outing { background: #fff8e6; color: #f39c12; }
.status-returned { background: #e8f7f0; color: #27ae60; }
.status-rejected { background: #f9f0ff; color: #8e44ad; }

.time-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  padding: 20px;
  background: #f8fafd;
  border-radius: 14px;
  margin-top: 20px;
  border: 1px solid #eef2f7;
}

.time-card {
  padding: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #eef2f7;
}

.time-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.time-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f4ff;
  color: #3498db;
}

.time-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.time-value {
  font-size: 18px;
  font-weight: 500;
  color: #3498db;
  text-align: center;
  padding: 10px;
  background: #f8fafd;
  border-radius: 10px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.back-button {
  padding: 12px 40px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
  transition: all 0.3s ease;
}

.back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
}

.info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #4a90e2, #63b3ed);
  border-radius: 18px 0 0 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .title-container {
    flex-direction: column;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .time-section {
    grid-template-columns: 1fr;
  }
  
  .info-item {
    flex-direction: column;
    gap: 8px;
  }
  
  .info-label {
    min-width: 100%;
  }
}
</style>